<!-- 系统级的统一配置 -->

<template>
  <a-card size="small" :bordered="false" :hoverable="false" style="padding: 0px 15px;">
    <a-tabs v-model:activeKey="activeKey" :force-render="true" @change="initActive">
      <a-tab-pane key="default" tab="默认配置">
        <DefaultConfig ref="defaultConfigRef" />
      </a-tab-pane>
      <a-tab-pane key="upstream" tab="上游配置">
        <UpstreamConfig ref="upstreamConfigRef" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
import DefaultConfig from './components/default-config.vue';
import UpstreamConfig from './components/upstream-config.vue';

// 默认tab
const activeKey = ref('default');

// 默认配置的ref
const defaultConfigRef = ref();
// 上游配置的ref
const upstreamConfigRef = ref();

// ref合集
const refs = reactive({
  default: defaultConfigRef,
  upstream: upstreamConfigRef,
});

// 初始tab选项中的内容
async function initActive() {
  try {
    // tab中除了默认的组件外，其它的都不会渲染到 DOM 中， 因此要给个延迟时间
    setTimeout(() => {
      refs[activeKey.value]?.initValue(activeKey.value);
    }, 100);
  } catch (error) {
    message.error('初始化数据错误!');
  }
}

onMounted(() => {
  initActive();
});
</script>